{%include file="header.html"%}
<style>
input {	width: 200px;}
textarea {	width: 350px;	height: 100px;}
</style>
<body>
<div class="fixed-bar">
  <div class="item-title">
    <h3>添加会员</h3>
  </div>
</div>
<div class="fixed_bottom">
  <form method="post" action="users.php" enctype="multipart/form-data" id="aspnetForm" name="form1">
    <table style=" width:100%;" cellpadding="0" cellspacing="0" class="table tb-type2">
      <tbody>
        <tr>
          <td class="firtd"> 用户名:</td>
          <td>
          	<input type="text" name="user_name" value="{%$user_edit.user_name%}" {%if $user_edit.user_id%} disabled="disabled" {%/if%} placeholder="请输入用户名" required>&nbsp;&nbsp;&nbsp;&nbsp;
            <span id="users"></span>  
          </td>
        </tr>
        <tr>
          <td class="firtd"> 登录密码:</td>
          <td><input type="password" name="password" value="" maxlength="20" required></td>
        </tr>
        <tr>
          <td class="firtd"> 确认密码:</td>
          <td><input type="password" name="repassword" value="" maxlength="20" required><span id="repassword"></span></td>
        </tr>
        <tr>
          <td class="firtd"> 会员等级:</td>     
          <td>
          	<select name="user_rank" id="">
            {%foreach from=$user_rank item=ranks%}
            <option {%if $user_edit.user_rank == $ranks.rank_id%} selected="selected" required {%/if%} value="{%$ranks.rank_id%}">{%$ranks.rank_name%}</option>
            {%/foreach%}
            </select>
          </td>
        </tr>
        <tr>
        	<td class="firtd"> 昵称:</td>
        	<td><input type="text" name="alias" value="{%$user_edit.alias%}" required></td>
        </tr>
        <tr>
        	<td class="firtd"> 性别:</td>
        	<td><input style="width:15px" type="radio" name="sex" {%if $user_edit.sex eq 1%}checked{%/if%} value="1"> 男 &nbsp;&nbsp;&nbsp;&nbsp;<input style="width:15px" {%if $user_edit.sex eq 0%}checked{%/if%} type="radio" name="sex" value="0"> 女</td>
        </tr>
        <tr>
        	<td class="firtd"> 邮箱:</td>
        	<td><input type="text" name="email" value="{%$user_edit.email%}" required>&nbsp;&nbsp;&nbsp;&nbsp;<span id="email"></span></td>
        </tr>
        <tr>
        	<td class="style1">&nbsp;</td>
        	<td>
          		<input type="hidden" name="act" value="insert">
            	<input type="hidden" name="user_id" value="{%$user_edit.user_id%}">
            	<a href="JavaScript:void(0);" class="btn" onclick="reset()"><span>重置</span></a>
            	<a href="JavaScript:void(0);" class="btn" onclick="$('#tj').click()"><span>确认提交</span></a>
            </td>
        </tr>
      </tbody>
    </table>
    <input type="reset" id="cz" style="display: none;">
    <input type="submit" id="tj" style="display:none;";>
  </form>
</div>
</body>
<script>
    // 重置方法
    function reset(){
        $('input').val('');
        $('textarea').text('');
    }
	$("input[name=user_name]").focus(function(){
		 $(this).next('span').html('');
		 $(this).next('span').css('color','#00f')
		 $(this).css('border-color','#ccc');
	});
	//验证用户名是否为手机号或用户名是否已经存在
	$("input[name=user_name]").blur(function(){
		$(this).data('type','1');
		vals=$(this).val();
		perg=/^(13[0-9]|14[0-9]|15[0-9]|18[0-9])\d{8}$/;
		if(vals.match(perg)){
			$.post("users.php",{act:'user_name',user_name:vals},function(data){
				if(data==1){
					$("input[name=user_name]").next('span').html('手机号已存在');
					$("input[name=user_name]").next('span').css('color','#f00')
					$("input[name=user_name]").css('border-color','#f00');
				}else{
					$("input[name=user_name]").next('span').html('正确');
					$("input[name=user_name]").next('span').css('color','#90B71B')
					$("input[name=user_name]").css('border-color','#ccc');
					$("input[name=user_name]").data('type','2');
				}
			});
		}else{
			$(this).next('span').html('请输入正确的手机号');
			$(this).next('span').css('color','#f00')
			$(this).css('border-color','#f00');
		}
	});
	//验证密码是否一致
	$("input[name=repassword]").blur(function(){
		$(this).data('type','1');
		val=$("input[name=password]").val();
		vals=$(this).val();
		if(vals==''){
			$(this).next('span').html('密码不能为空');
		 	$(this).next('span').css('color','#f00')
			$(this).css('border-color','#f00');
		}else{
			if(val==vals){
				$(this).next('span').html('正确');
				$(this).next('span').css('color','#90B71B')
				$(this).css('border-color','#ccc');
				$(this).data('type','2');
			}else{
				$(this).next('span').html('两次密码输入不一致');
				$(this).next('span').css('color','#f00')
				$(this).css('border-color','#f00');
			}
		}
	});
	//邮箱正则匹配
	$("input[name=email]").blur(function(){
		$(this).data('type','1');
		vals=$(this).val();
		perg=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
		if(vals.match(perg)){
			$(this).next('span').html('邮箱正确');
		 	$(this).next('span').css('color','#90B71B')
		 	$(this).css('border-color','#ccc');
			$(this).data('type','2');
		}else{
			$(this).next('span').html('格式有误');
		 	$(this).next('span').css('color','#f00')
			$(this).css('border-color','#f00');
		}
	});
	//submit提交
	$("form").submit(function(){
 	  if($("input[name=user_name]").data('type')==2){
         if($("input[name=repassword]").data('type')==2){
         		 if($("input[name=email]").data('type')==2){
         		
				 }else{
					   	 $("input[name=email]").focus();
						 $("input[name=email]").next('span').html('格式有误');
					 	 $("input[name=email]").next('span').css('color','#f00')
						 $("input[name=email]").css('border-color','#f00');
						return false;  
				 }	
  	 	 }else{
				 $("input[name=repassword]").focus();
				 $("input[name=repassword]").next('span').html('密码不一致');
				 $("input[name=repassword]").next('span').css('color','#f00')
				 $("input[name=repassword]").css('border-color','#f00'); 
				 return false;  
	 	 }	
  	  }else{
		 $("input[name=user_name]").focus();
		 $("input[name=user_name]").next('span').html('格式有误');
		 $("input[name=user_name]").next('span').css('color','#f00')
		 $("input[name=user_name]").css('border-color','#f00');
		 return false;  
	  }
});

</script>
</html>